<template>
  <div class="home-search-page">
    <img v-show="form.type===1" class="img" src="@/assets/images/l_bg1.png" alt="">
    <img v-show="form.type===2" class="img" src="@/assets/images/zhaoren1.png" alt="">
    <div class="block">
      <div class="login-block" v-loading="formLoading">
        <div class="top-img" @click="form.state=3" :class="form.state===2?'active':''" v-if="form.state!==3">
          <div class="top-text">小程序扫码登录</div>
          <img src="@/assets/images/loginImg/二维码.png" alt="" class="img" >
        </div>
        <div class="role-tab-block" v-if="form.state!==3">
          <div :class="form.type===1?'active':''" @click="form.type=1,form1.type=1" class="role-tab-item">求职者</div>
          <div :class="form.type===2?'active':''" @click="form.type=2,form1.type=2" class="role-tab-item">企业</div>
        </div>
        <div class="form-block">
          <div class="form-item" v-if="form.state===1">
            <input v-model="form.mobile" class="form-ctrl phone" maxlength="11" type="text" placeholder="手机号"/>
          </div>
          <div class="form-item" v-if="form.state===1">
            <input v-model="form.mobileCode" class="form-ctrl code" maxlength="6" type="text" placeholder="短信验证码"/>
            <div class="get-code" v-loading="sendCodeLoading" @click="sendAuthCode">{{ btnText }}</div>
          </div>
          <div class="form-agreement" v-if="form.state===1">
            <el-checkbox v-model="checked" style="margin-right: 8px;"></el-checkbox>
            首次登录将自动注册，即代表同意
            <router-link target="_blank" :to="{name:'Law'}" class="agreement-link">用户协议</router-link>
            和
            <router-link target="_blank" :to="{name:'Privacy'}" class="agreement-link">
              隐私条款
            </router-link>
          </div>
          <div class="btn2 btn" @click="handleLogin" v-if="form.state===1">登录/注册</div>
          <div class="form-item" v-if="form.state===2">
            <input v-model="form1.mobile" class="form-ctrl phone" maxlength="11" type="text" placeholder="手机号"/>
          </div>
          <div class="form-item" v-if="form.state===2">
            <input v-model="form1.passWord" class="form-ctrl code" type="password" placeholder="请输入密码"/>
          </div>
          <div class="form-agreement" v-if="form.state===2">
            <el-checkbox v-model="checked" style="margin-right: 8px;"></el-checkbox>登录即代表同意
            <router-link target="_blank" :to="{name:'Law'}" class="agreement-link">用户协议</router-link>
            和
            <router-link target="_blank" :to="{name:'Privacy'}" class="agreement-link">
              隐私条款
            </router-link>
          </div>
          <div class="btn2 btn" @click="passLogin" v-if="form.state===2">登录</div>
          <div v-if="form.state===3" class="scan-code-login">
            <div @click="form.state=1" :class="form.state===1?'active':''" class="title-item">
              <div class="top-text">验证码登录/注册</div>
              <img src="@/assets/images/loginImg/电脑.png" alt="" class="img"  @click="form.state=3" :class="form.state===2?'active':''">
            </div>
            <div class="title">手机扫码，安全登录</div>
           <div class="img-item">
             <img v-if="qrUrl" :src="qrUrl" alt="" class="code-img">
           </div>
            <div style="width: 100%;text-align: center;" v-if="sanOne">
              <div style="font-weight: 600;font-size: 16px;">扫码成功</div>
              <div style="font-size: 12px;">请在手机上确认是否授权登录！</div>
            </div>
          </div>
          <div class="login-type">
            <div class="login-type-text" v-if="form.state!==1">
              <i class="el-icon-mobile-phone" @click="form.state=1" :class="form.state===1?'active':''" >验证码登录</i></div>
            <div class="login-type-text" v-if="form.state!==2">
              <i class="el-icon-key" @click="form.state=2" :class="form.state===2?'active':''">密码登录</i></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getQRCode, sendMessageCodeApi} from "@/api/user";
import {validate} from "@/utils/validate";

export default {
  data() {
    return {
      formLoading:false,
      sendCodeLoading:false,
      sanOne: false,
      form: {
        mobile: '',
        mobileCode: '',
        type:1,
        state:1
      },
      form1: {
        mobile: '',
        passWord:'',
        type:1,
        state:1
      },
      qrCode: '',
      qrUrl: '',
      rules: {
        mobile: {
          name: '手机号码',
          required: true,
          validator: function (value, form, callback) {
            const phoneReg = /^((\+|00)86)?((134\d{4})|((13[0-3|5-9]|14[1|5-9]|15[0-9]|16[2|5|6|7]|17[0-8]|18[0-9]|19[0-2|5-9])\d{8}))$/;
            if (value.length !== 11) {
              callback('请输入正确的手机号');
            } else if (!phoneReg.test(value)) {
              callback('请输入正确的手机号');
            }
            callback();
          }
        },
        mobileCode: {
          name: '短信验证码',
          required: true,
          validator: function (value, form, callback) {
            if (value.length !== 6) {
              callback('请输入正确的短信验证码');
            }
            callback();
          }
        }
      },
      rules1: {
        mobile: {
          name: '手机号码',
          required: true,
          validator: function (value, form, callback) {
            const phoneReg = /^((\+|00)86)?((134\d{4})|((13[0-3|5-9]|14[1|5-9]|15[0-9]|16[2|5|6|7]|17[0-8]|18[0-9]|19[0-2|5-9])\d{8}))$/;
            if (value.length !== 11) {
              callback('请输入正确的手机号');
            } else if (!phoneReg.test(value)) {
              callback('请输入正确的手机号');
            }
            callback();
          }
        },
        passWord: {
          name: '密码',
          required: true,
          validator: function (value, form, callback) {
            if (value.length < 6) {
              callback('密码不能小于6位');
            }
            callback();
          }
        }
      },
      btnText: "获取验证码",
      seconds: 0,
      checked: false,
      countDown:null,
    }
  },
  watch:{
    "form.state":function (e){
        if(e===3)
        {
          this.getQRCode();
        }
    }
  },
  methods: {
    //发送验证码
    sendAuthCode() {
      if (this.seconds === 0) {
        if (!this.form.mobile) {
          this.$message.error('请先输入手机号码！');
          return;
        }
        if(this.sendCodeLoading){
          return;
        }
        this.sendCodeLoading=true
        sendMessageCodeApi({mobile: this.form.mobile, type: 1}).then(() => {
          this.$message.success('发送成功！');
          this.setCountDown(60)
        }).finally(() => {
          this.sendCodeLoading=false;
        })
      }
    },
    setCountDown(seconds) {
      this.countDown = setInterval(()=>{
        seconds = seconds > 0 ? seconds - 1 : seconds;
        this.btnText = seconds > 0 ? `重新获取(${seconds}s)` : '获取验证码';
        this.seconds = seconds;
        if (seconds === 0) {
          clearInterval(this.countDown);
        }
      }, 1000)
    },
    passLogin(){
      if(validate(this.form1,this.rules1)){
        if (!this.checked) {
          this.$message.error('请阅读并勾选同意《用户协议》和《隐私条款》');
          return;
        }
        this.formLoading=true;
        this.$store.dispatch('user/login',this.form1).then((res)=>{
          if(res)
          {
            this.$message.error(res)
          }else{
            this.$message.success('登录成功')
            this.$store.dispatch('user/loginIM').catch((err)=>{
              this.$message.error(err);
            });
            this.$router.push({name:'Home'})
          }
        }).finally(()=>{
          this.formLoading=false;
        })
      }
    },
    handleLogin(){
      if(validate(this.form,this.rules)){
        if (!this.checked) {
          this.$message.error('请阅读并勾选同意《用户协议》和《隐私条款》');
          return;
        }
        this.formLoading=true;
        this.$store.dispatch('user/login',this.form).then((res)=>{
          if(res)
          {
            this.$message.error(res)
          }else{
            this.$message.success('登录成功')
            this.$store.dispatch('user/loginIM').catch((err)=>{
              this.$message.error(err);
            });
            this.$router.push({name:'Home'})
          }
        }).finally(()=>{
          this.formLoading=false;
        })
      }
    },
    getQRCode(){
      getQRCode().then((res)=>{
          this.qrUrl = res.imgUrl;
          this.qrCode = res.scene;
          this.initWebSocket()
      })
    },
    initWebSocket() {
      const wsurl = process.env.VUE_APP_BASE_WS_WX + '/'+this.qrCode;
      this.websock = new WebSocket(wsurl);
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onmessage = this.websocketonmessage;
    },
    websocketonopen() {
      console.log("推送服务连接成功");
      // this.websocketsend('连接进行中', 'INITIAL');
    },
    websocketonerror() {
      // 错误
      // info(this, '推送服务连接失败');
      console.log("推送服务连接失败");
    },
    websocketonmessage(evt) {
      // 数据接收
      const msg = JSON.parse(evt.data);
      if(msg===200)
      {
          this.qrUrl = process.env.VUE_APP_BASE_API+"/api/file/91885/img/sanOne.png";
          this.sanOne = true;
      }else if(msg===300)
      {
        getQRCode().then((res)=>{
          this.qrUrl = res.imgUrl;
          this.qrCode = res.scene;
        })

      }else{
        this.formLoading=true;
        this.form1.mobile = msg.userName
        this.form1.passWord = msg.passWord
        this.$store.dispatch('user/login',this.form1).then(()=>{
          this.$message.success('登录成功');
          this.$store.dispatch('user/loginIM').catch((err)=>{
            this.$message.error(err);
          });
          this.$router.push({name:'Home'})
        }).finally(()=>{
          this.formLoading=false;
        })
      }




    },
  },
}
</script>

<style lang="scss" scoped>
.home-search-page {
  min-height: $fullMinHeight;
  width: 100%;
  background-color: #3F4BB4;
  display: flex;

  .img {
    margin-left: 20%;
    width: 40%;
  }

  .block {
    width: 20%;
    min-height: 450px;
    margin: 0 80px;
    padding: 7% 0;
    display: flex;
    flex-direction: row;
    justify-content: right;

    .login-block {
      background: #fff;
      border-radius: 8px;
      min-height: 450px;
      width: 330px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      .top-img{
        display: flex;
        position: absolute;
        margin-left: 130px;
        margin-top: -20px;
        .top-text{
          width: 150px;
          font-size: 14px;
          background: #fff;
          box-shadow: 0 0 5px 0 #dfdfdf;
          height: 25px;
          text-align: center;
          margin-top: 10px;
          padding: 3px;
          margin-right: -20px;
          cursor: pointer;
        }
        .top-text:hover{
          color: $orange;
        }
        .img{
          width: 50px;
          cursor: pointer;
        }
      }

      .role-tab-block {
        padding-top: 45px;
        display: flex;
        flex-direction: row;
        justify-content: center;

        .role-tab-item {
          padding: 0 10px;
          color: $darkGray;
          font-size: 16px;
          border-bottom: 2px solid rgba(0, 0, 0, 0);
          padding-bottom: 5px;
          margin: 0 10px;
          cursor: pointer;
        }

        .role-tab-item.active {
          color: $black;
          font-size: 17px;
          font-weight: bold;
          border-bottom: 2px solid $orange;
        }
      }
      .scan-code-login{
        display: flex;
        flex-direction: column;
        .title{
          font-size: 22px;
          font-weight: 500;
          margin-top: 70px;
         text-align: center;
          color: #222;
        }
        .title-item{
          display: flex;
          position: absolute;
          margin-left: 130px;
          margin-top: -20px;
          .top-text {
            width: 150px;
            font-size: 14px;
            background: #fff;
            box-shadow: 0 0 5px 0 #dfdfdf;
            height: 25px;
            text-align: center;
            margin-top: 10px;
            padding: 3px;
            margin-right: -20px;
            cursor: pointer;
          }
          .top-text:hover{
            color: $orange;
          }
          .img{
            width: 50px;
          }
        }

        .img-item{
          width: 100%;
          display: flex;
          justify-content: center;
          margin: 30px auto;
          .code-img{
            width:160px;
            height: 160px;
          }
        }

      }
      .login-type{
        display: flex;
        flex-direction: row;
        margin-top: 20px;
        justify-content: center;
        .login-type-text{
          margin-right: 10px;
          font-size: 14px;
          .el-icon-key{
            color: $darkGray;
          }
          .el-icon-mobile-phone
          {
            color: $darkGray;
          }
        }
        .el-icon-key:hover{
          color: $orange;
          cursor: pointer;
        }
        .el-icon-mobile-phone:hover{
          color: $orange;
          cursor: pointer;
        }

      }
      .form-block {
        //padding-top: 20px;
        width: 100%;
        display: flex;
        flex-direction: column;

        .form-agreement {
          margin-top: 30px;
          font-size: 14px;
          color: #72767b;

          .agreement-link {
            color: blue;
          }
        }

        .form-item {
          margin-top: 30px;
          width: 100%;
          display: flex;
          flex-direction: row;
          align-items: center;
          border-radius: 30px;
          background: $lightGray;

          .form-ctrl {
            width: 100%;
            height: 40px;
            padding: 0 20px;
            background: none;
          }

          .form-ctrl.code {
            width: calc(100% - 90px);
          }

          .get-code {
            width: 100px;
            font-size: 13px;
            color: $orange;
            border-left: 1px solid $midGray;
            padding-left: 10px;
            cursor: pointer;
          }
        }

        .btn {
          margin-top: 35px;
          height: 40px;
          width: 100%;
          font-size: 18px;
          border-radius: 5px;
        }
      }
    }
  }
}
</style>
